<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-select</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link href="../dialog/prism/prism.css" rel="stylesheet" />
<link href="../bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
</head>
<body>

原始下拉框：
<select>
    <option>000</option>
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
    <option>555</option>
    <option>666</option>
    <option>777</option>
    <option>888</option>
    <option>999</option>
</select>

<hr/>
html渲染下拉框：
<select class="selectpicker">
    <option>000</option>
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
    <option>555</option>
    <option>666</option>
    <option>777</option>
    <option>888</option>
    <option>999</option>
</select>

<hr/>
js渲染下拉框（optgroup）：
<select id="select_js">
    <optgroup label="数字">
        <option>000</option><option>111</option><option>222</option><option>333</option>
        <option>444</option><option>555</option>
    <optgroup label="字母小写">
        <option>aaa</option><option>bbb</option><option>ccc</option><option>ddd</option>
        <option>eee</option>
    </optgroup>
    <optgroup label="字母大写">
        <option>AAA</option><option>BBB</option><option>CCC</option><option>DDD</option>
        <option>EEE</option>
    </optgroup>
</SELECT>

<hr/>
js渲染下拉框含属性：
<select id="select_js_prop">
    <option>000</option><option>111</option><option>222</option><option>333</option>
    <option>444</option><option>555</option>
    <option>aaa</option><option>bbb</option><option>ccc</option><option>ddd</option>
    <option>eee</option>
    <option>AAA</option><option>BBB</option><option>CCC</option><option>DDD</option>
    <option>EEE</option>
</SELECT><hr/>

js渲染下拉框含属性：
<select id="select_multiple_js_prop" multiple>
    <option>000</option><option>111</option><option>222</option><option>333</option>
    <option>444</option><option>555</option>
    <option>aaa</option><option>bbb</option><option>ccc</option><option>ddd</option>
    <option>eee</option>
    <option>AAA</option><option>BBB</option><option>CCC</option><option>DDD</option>
    <option>EEE</option>
</SELECT>

<hr/>
本页面源代码为：
<pre id="dialog_center_css" class="language-html line-numbers" data-src="index.html"></pre>

<hr/>

<script src="../jquery/jquery.min.js"></script>
<script src="../popper.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="../dialog/prism/prism.js"></script>
<script type="text/javascript">
//运行js函数
function runCode(codeId){
    var code = document.getElementById(codeId).innerText;
    eval(code);
}
$(function(){
    //js 渲染
    $("#select_js").selectpicker();
    //js 渲染包含属性
    $("#select_js_prop").selectpicker({
        width: 220,
        noSelectedText: "-请选择-",
        actionsBox: true,
        liveSearch: true,
        size: 8,
        //header: "默认下拉8项长度",
        noneResultsText: "没有找到匹配项：{0}"
    });
    //js 渲染多选
    $("#select_multiple_js_prop").selectpicker({
        width: 220,
        noSelectedText: "-请选择-",
        actionsBox: true,
        liveSearch: true,
        size: 8,
        selectAllText: '全选',
        deselectAllText: '取消全选',
        noneSelectedText: '-请选择-',
        liveSearch: false
    });
});
</script>
</body>
</html>